asp.net MVC

How to create single fileUpload using asp.net MVC 4?

How to create single fileUpload using asp.net MVC 4?, someone asked me to explain?
By:

To begin create an asp.net mvc project called mvc-tutorials and also create a class and name it as picture with a single propery file with datatype HttpPostedFileBase.

Step 1: Create a class and give a name picture.Copy and paste the following code.

public class picture {
    public HttpPostedFileBase file { get; set; }
}

Step 2: Right click on the "Controllers" folder and add "fileUpload" controller. Copy and paste the following code. 

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_tutorials.Controllers
{
    public class fileUploadController : Controller
    {
        //
        // GET: /fileUpload/
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(picturepicture)
        {
            if (picture.file.ContentLength > 0) {
                var fileName = Path.GetFileName(picture.file.FileName);
                var filePath = Path.Combine(Server.MapPath("~/Images"), fileName);
               picture.file.SaveAs(filePath);
            }
            return RedirectToAction("Index");
        }
    }
}

Step 3: Right click on the "Index" action method in the "fileUploaderController" and add "Index" view. Copy and paste the following code.

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>single fileupload in asp.net MVC</title>
    <style type="text/css">
        .btn {
            width: 100px;
            height: 50px;
            background: #00BCD4;
            border-style: solid;
            border-color: white;
            color: white;
        }
    </style>
</head>
<body style="border: 1px solid #DED8D8; width: 400px; font-family: Arial; margin-left: 50px">
    @using (@Html.BeginForm(null, null, FormMethod.Post,
     new { enctype = "multipart/form-data" }))
    {
        <table>
            <tr>
                <td style="padding-bottom: 35px" colspan="2">
                   <h2 style="color: #FF5722">single file upload in asp.net</h2>
               </td>
            </tr>
            <tr>
                <td style="width: 100px;">
                   <b style="color: #FF5722">File:</b>
                </td>
                <td>
                   <input type="file" name="file" id="file" />
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="2" style="padding-top: 30px">
                   <input type="submit" class="btn" name="submit" />
                </td>
            </tr>
        </table>
    }
</body>
</html> 

Output: 

create single fileUpload using asp.net MVC 4

Related Article

Post your comments / questions



Recent Article